<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>win系统配置vue</title>
		<style>
			*{margin: 0; padding: 0; font-family: "微软雅黑";}
			p {padding-left: 10px; margin-top: 10px; font-size: 16px; color: black; background: #F5F7FA; height: 35px; line-height: 35px; border: 1px solid #ccc;}
			body{padding: 10px; width: 1100px; margin: 0 auto;}
		</style>
	</head>
	<body>
		<h2>基本的vue+webpack项目构建</h2>
		<p>1、安装node  地址：<a target="_blank" href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a>  （先进行下面的操作，如果不行在配置node  环境变量）</p>
		<p>2、安装好了之后   wind+r 输入 cmd  输入node -v  如果有版本显示那么就安装好了，没有就需要环境变量的配置了。（百度去-搜一大把）</p>
		<p>node -v</p>
		<p>3、安装npm    有些node自带了 就不需要安装了  </p>
		<p>npm install -g</p>
		<p>4、安装打包工具：webpack:  </p>
		<p>npm install webpack -g</p>
		<p>5、有时npm 被墙了  那么   安装淘宝镜像 </p>
		<p>npm install -g cnpm --registry=http://registry.npm.taobao.org</p>
		<p>6、安装vue-cli脚手架构建工具：   </p>
		<p>npm install -g vue-cli</p>
		<p>7、创建一个基于 "webpack" 模板的新项目</p>
		<p>vue init webpack （my-project 文件名）</p>
		<p>8、cd （my-project文件名）</p>
		<p>9：npm install  (依赖)</p>
		<p>10：npm run dev   （启动）</p>
		<p>现在基本的vue项目就生成好了，可以修改config下面index.js 改变端口：有时候服务开多了 被占用了启动不了。</p>
		<h2>vue+webpack+less+sass+项目构建与使用</h2>
		<p>从下面链接下载项目-解压 </p>
		<p><a target="_blank" href="https://gitee.com/ice-ice/vue-demo/tree/master/vue-two">https://gitee.com/ice-ice/vue-demo/tree/master/vue-two</a></p>
		<p>1、点开文件-空白处 shift + 鼠标右键  选择在此处打开命令窗口（或者wind+r 输入 cmd 然后找到该文件） 输入以下指令：</p>
		<p>npm install</p>
		<p>npm run dev</p>
		<p>运行报错，因为没有less和sass安装依赖</p>
		<p>2、安装less依赖，</p>
		<p>npm install less less-loader --save</p>
		<p>3、要用到 vuex vue-resource 需安装一下</p>
		<p>npm install vuex -save</p>
		<p>npm install vue-resource --save</p>
		<p>4、安装sass  执行以下指令</p>
		<p>npm install --save-dev sass-loader</p>
		<p>npm install --save-dev node-sass</p>
		<p>有时安装sass会被墙 那么老实的安装国内的吧</p>
		<p>cnpm install sass-loader  --save</p>
		<p>cnpm install node-sass  --save</p>
		<p>5、在build文件夹下的webpack.base.conf.js的rules里面添加配置</p>
		<p>
			{
			  test: /\.sass$/,
			  loaders: ['style', 'css', 'sass']
			}
		</p>
		<p>记得改端口，最后：npm run dev</p>
		<h2>使用就看官网API和代码注释<a target="_blank" href="https://cn.vuejs.org/v2/api/">https://cn.vuejs.org/v2/api</a></h2>
        <div>安装VUE2</div>
        <div>vue init webpack 项目名称</div>
        <div>安装less</div> 
        <div>npm install less@3.9.0 -save</div> 
        <div>npm install less-loader@5.0.0 -save</div> 
        <div>npm i</div> 
        <div>npm run dev</div> 
	</body>
</html>
